<script setup>
import { ref, computed, watchEffect } from 'vue'
import { getTableMeta } from '@/api/basic'
import Field from '@/modules/meta/Field.vue'
import { initRemoteValues } from './utils/table'
import tableData from '@/modules/test.json'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  meta: {
    type: Array,
    default: () => []
  },
  config: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

// 监听 依赖发生变化 更新
watchEffect(() => {
  emit('update:modelValue', props.modelValue)
})
// const form = computed(() => ({
//   get: function () {
//     console.log('get===', props.modelValue)
//     return props.modelValue
//   },
//   set: function (val) {
//     console.log('set===', val)
//     emit('update:modelValue', val)
//   }
// }))
const form = ref(props.modelValue)

const tableConfig = computed(() => props.config)
const tableMeta = computed(() => {
  return props.meta.reduce((t, c) => {
    t[c.key] = c
    return t
  }, {})
})
const source = 'table/Person.yaml'

const validate = (callback) => {
  if (typeof callback === 'function') {
    callback(true)
  }
}
const resetFields = (field) => {
  console.log(field)
}
defineExpose({ validate, resetFields })
</script>
<template>
  <table
    class="table-form"
    border="1"
    cellpadding="0"
    cellspacing="0"
    bordercolor="red"
    v-bind="tableConfig.props"
  >
    <tbody>
      <tr style="visibility: hidden">
        <th v-for="(c, i) in tableConfig.columns" :key="i" :style="`width:${c}`"></th>
      </tr>
      <tr v-for="(cols, i) in tableConfig.rows" :key="i">
        <td
          v-for="(col, j) in cols"
          :key="j"
          :colspan="col.colspan || 1"
          :rowspan="col.rowspan || 1"
          :style="col.style"
        >
          <template v-if="col.key && col.type === 'label'">
            <div class="cell label">
              {{ tableMeta[col.key]?.name || col.key }}
            </div>
          </template>
          <template v-else-if="col.key">
            <div class="cell content">
              <Field v-model="form" :col="tableMeta[col.key]" />
            </div>
          </template>
          <template v-else-if="col.label">
            <div class="cell label">
              {{ col.label }}
            </div>
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<style lang="less" scoped>
.table-form {
  table,
  tr,
  td {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    white-space: pre-line;
  }
  .cell {
    width: 100%;
    height: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.label {
      text-align: center;
      font-weight: bold;
    }

    &.content {
      padding: 3px;
    }

    .avatar-uploader {
      line-height: 0;
    }
  }
  tr:first-child {
    border-top: 0;
    th {
      height: 0;
    }
  }
}
</style>
